import { Component } from "react";
import { View, Text } from "@tarojs/components";
import { AtTabs, AtTabsPane } from 'taro-ui'
import { NavBar } from "./../../components/NavBar";

import { Ids, NAVBAR_CONFIG } from "./index.config";

// import "taro-ui/dist/style/components/button.scss" // 按需引入
import "taro-ui/dist/style/components/tabs.scss";
import "./index.less"

const MOCK_CATELIST: {
  cateId: number
  cateName: string
}[] = [{
  cateId: 0,
  cateName: '玉翠珠宝',
}, {
  cateId: 1,
  cateName: '工艺作品',
}, {
  cateId: 2,
  cateName: '文玩杂项',
}]

export default class Index extends Component {
  state = {
    activeId: Ids.home,
    cateList: [],
    currentTabIndex: 0
  };

  componentWillMount() {}

  componentDidMount() {
    Promise.resolve(MOCK_CATELIST)
      .then(res => {
        this.setState({
          cateList: res
        })
      })
  }

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  handleTabChange = (cIndex)=> ()=>{
    this.setState({
      currentTabIndex: cIndex
    })
  }

  renderTabs = () => {
    const { cateList, currentTabIndex } = this.state;
    console.log('cateList',  cateList)
    const tabs = cateList.map((item, index)=>(
      <View className="tabs-item-wrap" key={item.cateId} onClick={this.handleTabChange(index)}>
          <View className={currentTabIndex === index ? 'tip-cu' : 'tip'}/>
          <View className="tabs-item-title">
            <Text>{item.cateName}</Text>
          </View>
      </View>
    ))
    return (
      <View className="tabs-container">
        <View className="tabs-items-wrap">
          {tabs}
        </View>
        <View className="tab-content">123</View>
      </View>

    )
  }

  render() {
    const tabs = this.renderTabs();
    return (
      <View className="index">
        <View className="tabs-wrap">
          {tabs}
        </View>
        <View className='bottom-navbar-wrap'>
          <NavBar
            onChange={item => {
              this.setState({
                activeId: item.id
              });
            }}
            config={NAVBAR_CONFIG}
            activeId={this.state.activeId}
          />
        </View>

      </View>
    );
  }
}
